import { defineComponent } from 'vue';
import { useVJSFContext } from '../context';
import { SchemaFormPropsDefine } from '../types';
import { isObject } from '../utils';

// 这个组价的功能就是把 schema 中的 properties 下面的 属性渲染成对应的节点
// 每个 properties 的 item 又是一个 schema

// 第一种
// {
//   schema: {
//     type: 'object',
//     properties: {
//       name: {
//         type: string
//       },
//       age: {
//         type: number
//       }
//     },
//     default: {
//       name: "小明"
//       age： 10
//     }
//   }
// }

export default defineComponent({
  name: 'ObjectField',
  props: SchemaFormPropsDefine,
  setup(props) {
    const context = useVJSFContext();
    const { SchemaItem } = context;
    // 拿到 props里面的 value ，修改值并交给父组件进行修改。
    const handleChange = (v: any, key: string) => {
      const currValue: any = isObject(props.value) ? props.value : {};
      if (v) {
        currValue[key] = v;
      } else {
        delete currValue[key];
      }
      props.onChange(currValue);
    };
    return () => {
      const { schema, rootSchema, value } = props;
      const properties = schema.properties || {};
      const currValue: any = isObject(props.value) ? value : {};

      // 循环遍历属性
      return Object.keys(properties).map((k: string, index: number) => (
        <>
          <SchemaItem
            schema={properties[k]}
            rootSchema={rootSchema}
            value={currValue[k]}
            key={index}
            onChange={(v) => handleChange(v, k)}
          />
        </>
      ));
    };
  },
});
